<!-- 11.10 原商品列表 -->
<template>
	<app-layout>
		<view class="sort-rule">
			<app-sort-rule @sort="setSort" :theme="getTheme" @setStyle="setStyle"></app-sort-rule>
		</view>
		<view class="index-nav" v-if="nav_list.length > 0">
			<view class="app-index-nav dir-left-nowrap cross-center">
				<scroll-view scroll-x class="app-scroll">
					<view class="app-imtem" @click="changeStatus(cat_fid)">
						<image
							:src="cat_url != '' ? cat_url : imgprefix + 'web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'"
							mode=""></image>
						<text class="app-item"
							:class="cat_id == cat_fid && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == cat_fid && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''">全部</text>
					</view>
					<view class="app-imtem" v-for="(item) in nav_list" :key="item.id" @click="changeStatus(item.id)">
						<image
							:src="item.pic_url != '' ? item.pic_url : imgprefix + '/web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'"
							mode=""></image>
						<text class="app-item u-line-1"
							:class="cat_id == item.id && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == item.id && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 11.10 两种显示方式 11.12 黄金 -->
		<view class="product-list" v-if="goods_list.length > 0 && numid % 2 == 0">
			<u-goods-ware :mall_id="mall_id" :value="goods_list" @routego="routeGo" :godstype="godstype"></u-goods-ware>
		</view>
		<view class="list-two" v-if="goods_list.length > 0 && numid % 2 != 0">
			<view class="list-two-item" v-for="(child,childindex) in goods_list" :key="childindex"
				@click="routeGo(child)">
				<view class="tuwen">
					<image class="image" :src="child.cover_pic" mode=""></image>
					<view class="sendcoin" v-if="mall_id == 1">
						成交后送{{child.original_price_discount}}金币
					</view>
				</view>
				<view class="wen">
					<text class="list-two-title u-line-1">{{child.name}}</text>
					<view class="price">
						定金 {{'￥' + child.price}}
					</view>
					<view class="subtitle u-line-2">
						去实体店付<text class="disprice">余款{{child.original_discount_price}}元</text>
					</view>
					<view class="goldsd" v-if="mall_id == 1">
						<text class="golds" v-if="godstype != 'huangjin'">
							金币可抵{{child.original_price_discount}}元
						</text>
						<text class="goldd">
							线下成交后可返{{child.original_discount_price1}}金币
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="u-loading-list" v-if="loading">加载中...</view>
		<view class="app-no-goods" v-if="goods_list.length === 0">
			<app-no-goods background="#f7f7f7"></app-no-goods>
		</view>

		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx">
			<!-- 11.12 注释购物车 -->
			<!-- <app-jump-button url="/pages/cart/cart" open_type="redirect">
				<image class="quick-btn" src="./image/goods-list-card.png"></image>
			</app-jump-button> -->
			<image @click="backTop" class="quick-btn" v-if="opacity == 1" src="./image/back-top.png"></image>
		</view>
		<!-- 9.18 -->
		<view class="touch" v-if="available">
			<browe ref="countdown" :available="available" :time="time" :receive="receive" @finish="onFinish"
				:goldcoin="goldsnum" type="1">
				<template v-slot="{day, hour, minute, second, remain, time}"></template>
			</browe>
		</view>
	</app-layout>
</template>

<script>
	var timee;
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appProductList from '../../components/page-component/app-product-list/app-product-list.vue';
	import appSortRule from '../../components/page-component/app-sort-rule/app-sort-rule.vue';
	import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';
	import uGoodsWare from '../../components/page-component/u-goods-list/u-goods-ware.vue';
	// 9.18
	import browe from '../../components/browe/browe.vue'
	let mallurl = null
	export default {
		name: "list",

		data() {
			return {
				imgprefix: this.$siteInfo.imgroot,
				// 商品数据
				goods_list: [],
				boxHeight: [],
				beHeight: '',
				// 总页数
				page_count: 1,
				coupon_id: 0,
				page: 1,
				cat_id: 0,
				// 频道传值
				cat_fid: 0,
				cat_url: '',
				// 标题
				title: '',
				sort: 1,
				sort_type: 1,
				first_req: true,
				listStyle: false,
				noGoods: false,
				// compList: [],
				// compTime: null,
				// oldList: []
				loading: false,
				id: 0,
				total_count: 0,
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,
				// 商品分类
				nav_list: [],

				// 9.18 倒计时 
				/* 移动所需参数 */
				flag: false,
				time: 60000,
				receive: false,
				available: false,

				// 9.27 金币数量
				goldcoin: 0,
				goldsnum: 2,

				// 11.10 获取numid 如果存在
				numid: 0,

				// 11.12 判断是否是黄金
				godstype: '',
				// 商城id
				mall_id: 1,
			}
		},
		onReady() {
			if (this.title != '') {
				uni.setNavigationBarTitle({
					title: this.title,
				});
			}
		},
		onLoad(options) {
			// 11.12 黄金
			if (options.godstype) {
				this.godstype = options.godstype
			}
			// 9.18
			if (options.available) {
				this.available = options.available
			}
			// 11.10 获取numid 如果存在
			if (options.numid) {
				this.numid = options.numid
			} else {
				this.numid = 0
			}
			if (options.goldsnum) {
				this.goldsnum = options.goldsnum
			}
			// 商城id
			this.mall_id = options.mall_id || 1
			mallurl = this.$siteInfo.apiroot + '?_mall_id=' + this.mall_id + '&r='

			// this.imgprefix = this.$siteInfo.imgroot
			if (options.cat_id > 0) {
				this.cat_id = options.cat_id;
				this.cat_fid = options.cat_id;
			} else {
				this.cat_id = 0
			}
			this.title = options.title || '';

			if (options.coupon_id > 0) {
				this.coupon_id = options.coupon_id
			}
			this.requestCats(this.cat_id)

			this.request()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// 9.18
			if (this.available) {
				clearTimeout(timee);
				this.flag = false;
				this.$refs.countdown.start()
				timee = setTimeout(() => {
					this.$refs.countdown.pause()
					this.flag = true;
				}, 500);
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
				getTheme: 'getTheme',
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			}
		},
		onReachBottom() {
			// 循环
			if (this.page < this.page_count) {
				this.page++;
				// this.noGoods = false;
				this.request();
			} else {
				this.loading = false;
				// this.noGoods = true;
				let goodslist = this.$storage.getStorageSync('soldList');
				if (goodslist) {
					this.goods_list = this.goods_list.concat(goodslist)
				} else {
					this.request()
				}
			}
		},
		methods: {
			// 9.27 加载金币数量
			goldnum() {
				this.$request({
					url: this.$api.integral_mall.setting + '&type=["integral_ratio"]'
				}).then((res) => {
					this.goldcoin = res.data.integral_ratio.gold[0]
				}).catch(() => {

				})
			},
			// 9.18
			onFinish() {
				// console.log(888);
				this.receive = true
			},

			routeGo(e) {
				uni.navigateTo({
					url: e.page_url + '&title=' + this.title + '&cat_id=' + this.cat_id + '&mall_id=' + e.mall_id
				});
			},
			// 分类列表请求
			requestCats(cat_id) {
				this.$request({
					url: mallurl + this.$apiUrl.default.cat_list,
					data: {
						cat_id: cat_id
					}
				}).then(res => {
					if (res.code === 0) {
						this.nav_list = this.nav_list.concat(res.data.list);
					}
				});
			},
			// 分类列表切换
			async changeStatus(id) {
				this.cat_id = id;
				this.page = 1;
				this.goods_list = [];
				this.boxHeight = []
				this.beHeight = ''
				this.$storage.removeStorageSync('soldList')
				this.request();
			},
			// 数据请求
			async request() {
				this.$showLoading();
				const res = await this.$request({
					url: mallurl + this.$apiUrl.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.cat_id,
						sort: this.sort,
						sort_type: this.sort_type,
						keyword: '',
						coupon_id: this.coupon_id,
						sign: '',
						is_sales: 1
					}
				});
				if (res.code === 0) {
					this.$hideLoading();
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					this.goods_list = this.goods_list.concat(res.data.list)
					this.$storage.setStorageSync('soldList', this.goods_list)
					if (this.total_count === 0) {
						this.noGoods = true;
					}
				} else {
					this.$hideLoading();
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},

			setSort(data, sort_type) {
				this.first_req = true;
				this.sort = data;
				this.page = 1;
				this.sort_type = sort_type;
				this.goods_list = [];
				// this.oldList = [];
				this.request(0).then(() => {
					this.first_req = false;
					this.backTop();
				});
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

			setStyle(data) {
				this.listStyle = data;
			},
			splitData() {
				if (!this.compList.length) return;
				this.goods_list.push.apply(this.goods_list, this.compList.splice(0, 10));
				if (this.compList.length) {
					this.compTime = setTimeout(() => {
						this.splitData();
					}, 200);
				}
			}
		},

		components: {
			'app-product-list': appProductList,
			'app-sort-rule': appSortRule,
			'app-no-goods': appNoGoods,
			uGoodsWare,
			browe
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/diamonds/list',
				title: this.title,
				params: {
					cat_id: this.cat_id,
					title: this.title,
					mall_id: this.mall_id
				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/plugins/diamonds/list',
				title: this.title,
				params: {
					cat_id: this.cat_id,
					title: this.title,
					mall_id: this.mall_id
				}
			});
		},
	}
</script>

<style scoped lang="scss">
	.sort-rule {
		width: #{750upx};
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}

	// 分类
	.index-nav {
		width: #{750rpx};
		height: #{172rpx};
		// height: #{264rpx};
	}

	.app-index-nav {
		height: #{172rpx};
		background-color: white;
		width: #{750rpx};
		/* margin-top: -32rpx;
		margin-top: 92rpx; */
		position: fixed;
		top: 92rpx;
		left: 0;
		z-index: 1000;

		.app-scroll {
			// width: #{641rpx};
			height: #{172rpx};
			white-space: nowrap;

			.app-imtem {
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// min-width: 92rpx;
				width: 150rpx;
				padding-top: 18rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				width: 150rpx;
				margin: 24rpx;
				text-align: center;
				color: #666666;
				padding: 0 #{10rpx};
				box-sizing: border-box;
				height: #{56rpx};
				line-height: #{56rpx};
				border-radius: #{28rpx};
				// margin: #{18rpx} #{32rpx};
			}

			.app-active-item {
				color: white;
			}

			.default-item {
				background: linear-gradient(140deg, #ffa360, #ff5c5c);
			}
		}
	}

	.app-allim {
		width: 100%;
		height: 92rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 264rpx;
		left: 0;
		z-index: 1000;

		.app-item {
			display: block;
			font-size: #{28rpx};
			color: #666666;
			padding: 0 #{24rpx};
			box-sizing: border-box;
			width: 104rpx;
			height: #{56rpx};
			line-height: #{56rpx};
			border-radius: #{28rpx};
			margin: #{18rpx} auto;
		}

		.app-active-item {
			color: white;
		}

		.default-item {
			background: linear-gradient(140deg, #ffa360, #ff5c5c);
		}
	}

	// 11.10 列表
	.list-two {
		margin-top: 120rpx;
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			height: 240rpx;
			font-size: 28rpx;

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				flex: 1;
				text-align: justify;
				width: 436rpx;
				display: inline-block;
			}

			.tuwen {
				position: relative;
				width: 240rpx;
				height: 240rpx;
			}

			.wen {
				margin-left: 36rpx;
				height: 240rpx;
			}

			.sendcoin {
				position: absolute;
				bottom: 0;
				width: 240rpx;
				background-color: #ff0000;
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 4rpx 0;
				text-align: center;
			}

			.price {
				margin-top: 12rpx;
				color: #FF5238;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.subtitle {
				margin-top: 12rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(0, 0, 0, 0.8);
				font-weight: bold;

				// 9.28
				.disprice {
					color: #ff0000;
				}
			}

			.goldsd {
				margin-top: 12rpx;
				// 10.8 修改文字大小 10.14 修改文字大小
				font-size: 24rpx;
				line-height: 36rpx;
				font-weight: bold;

				.golds {
					border: 2rpx solid #e6993f;
					color: #e6993f;
					padding: 2rpx;
					border-radius: 8rpx;
					display: inline-block;
					margin-right: 12rpx;
				}

				.goldd {
					// 10.14 注释左加上
					// margin-left: 8rpx;
					margin-top: 2rpx;
					border: 2rpx solid #c24341;
					color: #c24341;
					padding: 2rpx;
					border-radius: 8rpx;
					display: inline-block;
				}
			}
		}
	}

	.product-list {
		margin-top: #{124upx};
	}

	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}

	.app-no-goods {
		margin-top: 200upx;
	}

	.no-goods {
		width: 750upx;
		margin: 20upx 0;
	}

	.u-no-icon {
		width: 18upx;
		height: 20upx;
		background-image: url("../../static/image/icon/no.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0 10upx 0 15upx;
	}

	.symbol {
		width: 30upx;
		height: 2upx;
		background-color: #d2d2d2;
	}

	.u-text {
		font-size: 24upx;
		color: #b0b0b0;
		margin-right: 15upx;
	}

	.u-loading-list {
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #b0b0b0;
		font-size: 24upx;
	}
</style>
